<!DOCTYPE html>
<html lang="en">
	<%- include('header') %>
<body>

<div class="modal fade" tabindex="-1" role="dialog" id="add-category">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">添加分类</h4>
        </div>
        <div class="modal-body" id="category-form">
            <form @submit.prevent="submit">
                <input type="hidden" name="id" v-model="id">
                <div class="form-group">
                  <label for="category-title">类别名称</label>
                  <input type="text" class="form-control" id="category-title" name="title" placeholder="Title" v-model="title">
                </div>
                <div class="form-group">
                  <label for="category-sort">排序</label>
                  <input type="text" class="form-control" id="category-sort" name="sort" placeholder="Sort" v-model="sort">
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
              </form>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

  <div class="modal fade" tabindex="-1" role="dialog" id="tip-box">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">通知</h4>
          </div>
          <div class="modal-body">
              <p>{{info}}</p>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

<div class="wrapper">
    <div class="box">
        <div class="row row-offcanvas row-offcanvas-left">
            <div class="column col-sm-2 col-xs-1 sidebar-offcanvas" id="sidebar">
              <%- include('sidebar') %>
            </div>
          
            <!-- main right col -->
            <div class="column col-sm-10 col-xs-11" id="main">
                
              <%- include('topbar') %>  

                <div class="padding">
                    <div class="full col-sm-9">
                      
                        <!-- content -->                      
                      	<div class="row">
                          
                         <!-- main col left --> 
                         <div class="col-sm-5">
                              <div class="panel panel-default">
                                <div class="panel-heading"><h4>文章分类</h4></div>
                                  <div class="panel-body">
                                    <div class="list-group" id="category-list">
                                      <div class="list-group-item" v-for="category in categories">
                                          <div class="row">
                                            <div class="col-md-8">
                                      <p>{{category.sort}}&nbsp;&nbsp;&nbsp;{{category.title}}</p>
                                    </div>
                                      <div class="btn-group clo-md-4" role="group">
                                          <button type="button" class="btn btn-info btn-sm" @click="editCategory(category._id)">编辑</button>
                                          <button type="button" class="btn btn-danger btn-sm" @click="deleteCategory(category._id)">删除</button>
                                        </div>
                                        </div>
                                    </div>
                                      
                                    </div>
                                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add-category">添加分类</button>
                                    <button type="button" class="btn btn-success" onclick="addPost('/post')">添加文章</button>
                                  </div>
                              </div>
                          </div>
                          
                          <!-- main col right -->
                          <div class="col-sm-7">
                               
                                <div class="well"> 
                                   <form class="form">
                                    <h4>Sign-up</h4>
                                    <div class="input-group text-center">
                                    <input type="text" class="form-control input-lg" placeholder="Enter your email address">
                                      <span class="input-group-btn"><button class="btn btn-lg btn-primary" type="button">OK</button></span>
                                    </div>
                                  </form>
                                </div>
                                
                             <div id="post-panel">
                               <div v-for="post in posts">
                               <div class="panel panel-default">
                                 <div class="panel-heading">
                                    <div class="row">
                                        <div class="col-md-10"><h4>{{post.title}}</h4></div>
                                        <div class="col-md-2"><button type="button" class="btn btn-primary" @click="editPost(post._id)">编辑</button></div>
                                      </div>
                                   
                                  </div>
                                  <div class="panel-body">
                                    
                                    <div v-html="post.text"></div>
                                  </div>
                               </div>
                              </div>
                              </div>      
                               

                               
                            
                               
                            
                          </div>
                       </div><!--/row-->
                      
                        
                       <%- include('footer') %>  
                      
                        
                      
                    </div><!-- /col-9 -->
                </div><!-- /padding -->
            </div>
            <!-- /main -->
          
        </div>
    </div>
</div>
</body>

<!-- script references -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/marked.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script>

  // 页面加载后请求数据
  $(function() {
    // 请求文章分类信息数据
    // getCategoryInfo()
    // 获取所有的文章
    getCategoryInfo()
    // getPosts()
    
    setTimeout(getPosts, 500)
  })

function addPost(url) {
  $.cookie("post_id", "", {expires: -1})
  redirect(url)
}

function redirect(url) {
  // console.log(url)
  window.location.href = url
}

// 文章类别对象
  var categoryListVue = new Vue({
    el: '#category-list',
    data: {
      categories: []
    },
    methods: {
      deleteCategory: function (categoryId) {
        delCategory(categoryId)
      },
      editCategory: function (categoryId) {
        editCategoryById(categoryId)
      }
    }    
  })

var postsVue = new Vue({
  el: '#post-panel',
  data: {
    posts: []
  },
  methods: {
    editPost: function (postId) {
      $.cookie('post_id', postId, { path: '/' });
      redirect('/post')
    }
  }
})

// 删除文章类别
  function delCategory(categoryId) {
    axios.delete('/category', {data: {categoryId: categoryId}})
    .then(function (response) {
      console.log(response)
      tipVue.info = response.data.info
      $('#tip-box').modal('toggle')
      if (response.data.error) {
        console.log(response.data.error)
      } else {
        getCategoryInfo()
      }
    })
    .catch(function (error) {
      console.log(error)
    })
  }

// 编辑文章类别
function editCategoryById(categoryId) {
  axios.get('/category/' + categoryId)
    .then(function (response) {
      console.log(response)
      showCategoryForm(response.data)
    })
    .catch(function (error) {
      console.log(error)
    })
}

// 展示文章类别编辑面板
function showCategoryForm(category) {
  catVue.id = category._id
  catVue.title = category.title
  catVue.sort = category.sort
  $('#add-category').modal('toggle')
}

// 提示框对象
  var tipVue = new Vue({
    el: '#tip-box',
    data: {
      info: ''
    }
  })

// 文章类别表单对象
  var catVue = new Vue({
    el: '#category-form',
    data: {
      id: '',
      title: '',
      sort: ''
    },
    methods: {
      submit: function() {
        postCategoryInfo({
          id: this.id,
          title: this.title,
          sort: this.sort
        })
      }
    }
  })

// 提交文章类别信息
  function postCategoryInfo(data) {
    axios.post('/category', data)
      .then(function (response) {
        console.log(response)
        refreshCategoryInfo(response.data)
      })
      .catch(function (error) {
        console.log(error)
      })
  }

// 刷新文章类别信息
  function refreshCategoryInfo(data) {
    catVue.id = ''
    catVue.title = ''
    catVue.sort = ''
    $('#add-category').modal('toggle')
    tipVue.info = data.info
    $('#tip-box').modal('toggle')
    if (!data.error) {
      getCategoryInfo()
    }
  }

// 获取文章类别信息
  function getCategoryInfo() {
    axios.get('/api/categories')
    .then(function (response) {
      categoryListVue.categories = response.data
      console.log(response)
    })
    .catch(function (error) {
      console.log(error)
    })
  }

// 获取所有文章
function getPosts() {
  axios.get('/getBlogs')
    .then(function (response) {
      console.log(response.data)
      postsVue.posts = response.data
      for (let post of postsVue.posts) {
            post.text = marked(post.text)
        }
      // console.log(postsVue.posts[0].text)
    })
    .catch(error => {
      console.log(error)
    })
}

</script>
</html>